<?php require_once APPPATH.'views/bootstrap/snip_postbox.php' ?>
<?php require_once APPPATH.'views/bootstrap/snip_projectibox.php' ?>

<?php 
	$projectMemberType = isset($projectMember) ? $projectMember->type : NULL;
?>
							<div class="accordion" id="projectInfo">
								<div class="accordion-group">
									<div class="accordion-heading">
										<a class="accordion-toggle" data-toggle="collapse" data-parent="#projectInfo" href="#projectDetails">
											<?php echo $project->name; ?> | <?php echo datetime_format_convert($project->planStartDate, FORMAT_DATE_ISO, $sessionInfo->userInfo['dateFormat']) . ' ~ ' . datetime_format_convert($project->planEndDate, FORMAT_DATE_ISO, $sessionInfo->userInfo['dateFormat']); ?>
										</a>
									</div>
									<div id="projectDetails" class="accordion-body collapse">
										<div class="accordion-inner">
											<p><b><?php echo $project->goal; ?></b></p>
											<p><?php echo $project->description; ?></p>
											<h4>Timeline</h4>
<div id="projectTimeline"></div>
										</div>
									</div>
								</div>
							</div>

<?php if (Util_Data::containsString( array('owner','admin','collab'), $projectMemberType)) { ?>
							<form class="form-actions form-inline" name="PostForm" action="<?php echo controller_base_path($requestContext); ?>/Post/add" method="post" >
								<input type="hidden" id="projectSid" name="projectSid" value="<?php echo $project->sid; ?>" />
								<fieldset>
									<div class="control-group">
										<label class="control-label" for="category">Status Feed</label>
										<div class="controls">
											<?php echo Form::select('categorySid', $ref_categories, null); ?>
										</div>
									</div>
									<div class="control-group">
										<textarea id="postBody" name="postBody" class="span12"></textarea>
										<label class="error" for="postBody" id="postBody_error">This field is required.</label>
									</div>
									<div class="control-group">
										<input id="tagsCsv" name="tagsCsv" />
									</div>
									<div class="control-group">
										<div class="controls">
											<button type="submit" class="btn">Post</button>
										</div>
									</div>
								</fieldset>
							</form>
<?php } ?>
							<!-- STREAMS -->
							<h6>Stream</h6>
							<hr />
							
<?php foreach ($posts as $post) {?>
							<?php display_post($post, $requestContext); ?>
							<hr />
<?php } ?>
							

<script src="http://www.google.com/jsapi" type="text/javascript" ></script>
<script src="<?php echo WEBCONTEXT; ?>/public/timeline/timeline.js" type="text/javascript" ></script>
<link rel="stylesheet" type="text/css" href="<?php echo WEBCONTEXT; ?>/public/timeline/timeline.css">


<script type="text/javascript">
// FYI jQuery: multiple $(document).ready() is possible.
$(document).ready(function() {
	/*
	$('.quick-form').each(function() {
        $('input').keypress(function(e) {
            // Enter pressed?
            if(e.which == 10 || e.which == 13) {
				//alert ($('input').val());
                this.form.submit();
            }
        });
    });*/
});

</script>


<script type="text/javascript">
   
	var timeline;
	var data;
	
	google.load("visualization", "1");
	// Set callback to run when API is loaded
	google.setOnLoadCallback(drawVisualization); 
	
	// Called when the Visualization API is loaded.
	function drawVisualization() {
		// Create a JSON data table
		data = [
			/* Script goes here with real milestone data */
<?php 
$size = count($progressItems);
$i = 0;
foreach ($progressItems as $progressItem) {
	$startDt = datetime_parse_from($progressItem->planStartDt);
	$endDt = datetime_parse_from($progressItem->planEndDt);
	?>
			{
				'start': new Date(<?php echo datetime_format($startDt, "Y,m,d"); ?>),
				<?php if ( $endDt != null) { ?>'end': new Date(<?php echo datetime_format($endDt, "Y,m,d"); ?>),<?php } ?>
				'content': '<?php echo $progressItem->name ?>'
			} <?php if ( (++$i) != $size ) echo ','; ?>
<?php } ?>
		];
		
		// specify options
		var options = {
			'width':  '100%', 
			'height': '200px',
			'editable': true,   // enable dragging and editing events 
			'style': 'box'
		};
		
		// Instantiate our timeline object.
		timeline = new links.Timeline(document.getElementById('projectTimeline'));
		
		function onRangeChanged(properties) {
			document.getElementById('info').innerHTML += 'rangechanged ' +
				properties.start + ' - ' + properties.end + '<br>';
		}
		
		// attach an event listener using the links events handler
		links.events.addListener(timeline, 'rangechanged', onRangeChanged);
		
		// Draw our timeline with the created data and options 
		timeline.draw(data, options);
	}

   </script>